<template>
	<view class="video">
		<NavScroll @changeIndex="toggleSort" :sortList="sortList" :curSortIndex="curSortIndex"/>
		<Search />
		<Videos
		 v-if="sortList.length" 
		 @changeIndex="toggleSort"
		 :navLength="sortList.length"
		 :videoGroupId="sortList[curSortIndex].id"
		 :cookie="cookie"
		 :curSortIndex="curSortIndex"
		 />
		 <BottomBar ref="btmBarRef"/>
	</view>
</template>

<script>
	import NavScroll from '../../components/NavScroll/NavScroll.vue'
	import Search from '../../components/Search.vue'
	import Videos from './childComps/Videos.vue'
	import BottomBar  from '../index/childComps/BottomBar.vue'
	import { videoCategory } from '../../api/index.js'
	export default {
		data() {
			return {
				// 热门歌单分类
				sortList: [],
				// 当前tag的索引值
				curSortIndex: 0,
				cookie: uni.getStorageSync('cookies') || ''
			}
		},
		components: { NavScroll, Search, Videos, BottomBar },
		onLoad() {
			this.videoCategoryFun(this.cookie)
		},
    onShow() {
      this.cookie = uni.getStorageSync('cookies') || ''
      if (!this.cookie) {
        // 跳转到登录界面
        uni.reLaunch({
          url: '../login/login'
        })
      }
    },
		methods: {
			// 获取视频分类列表数据
			async videoCategoryFun(cookie) {
				const {data: res} = await videoCategory({cookie})
				if (res.code === 301 || res.code === 302) {
        // 跳转到登录界面
        uni.reLaunch({
          url: '../login/login'
        })
				} else if (res.code === 200) {
					// 存储数据
					this.sortList = [...res.data]
				}
			},
			//点击某个视频分类时触发
			toggleSort(index) {
				this.curSortIndex = index
			}
		},
		onShow() {
			// 等待DOM加载完毕后在执行，子组件 BottomBar的初始化数据函数
			this.$nextTick(function(){
				this.$refs.btmBarRef.initData()
			})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .song_list_scroll {
		width: auto;
		padding: 0 20rpx;
	}
</style>
